import styles from "./index.module.scss";
import { useDispatch, useSelector } from "react-redux";
import EchartsEL from "./echartsEL";

export default function General() {

  const seriesData = [
    {
      name: "重庆",
      num1: 100,
      num2: 100,
    },
    {
      name: "北京",
      num1: 150,
      num2: 50,
    },
    {
      name: "上海",
      num1: 120,
      num2: 70,
    },
    {
      name: "成都",
      num1: 120,
      num2: 70,
    },
  ];
  const legendArr = ["未完成任务", "已完成任务"];
  const colorArr = [
    [
      "rgba(0, 147, 221, 1)",
      "rgba(0, 88, 255, 0.20)",
      "rgba(0, 114, 221, 1)",
      "rgba(255, 255, 255, 1)",
      "rgba(10, 49, 108, 0.60)",
      "rgba(27, 101, 155, 0.60)",
    ],
    [
      "rgba(0, 221, 88, 1)",
      "rgba(0, 255, 87, 0.20)",
      "rgba(0, 126, 51, 1)",
      "rgba(255, 255, 255, 1)",
      "rgba(10, 108, 37, 0.60)",
      "rgba(27, 155, 55, 0.60)",
    ],
  ];
  const theme = useSelector((state) => {
    return state.theme;
  });


  return (
    <div className={styles.areaBox}>
      <div className={styles.areaBoxLeft}>
        <div
          className={theme ? styles.profitLeftTopLight : styles.profitLeftTop}
        >
          <div className={styles.title}>任务数量</div>
          <div className={theme ? styles.valueLight : styles.value}>10,720</div>
        </div>
        <div
          className={
            theme ? styles.profitLeftBottomLight : styles.profitLeftBottom
          }
        >
          <div className={styles.title}>完成数量</div>
          <div className={theme ? styles.valueLight : styles.value}>10,720</div>
        </div>
        <div
          className={
            theme ? styles.profitLeftBottomLight : styles.profitLeftBottom
          }
        >
          <div className={styles.title}>未完成数</div>
          <div className={theme ? styles.valueLight : styles.value}>10,720</div>
        </div>
      </div>
      <div className={styles.areaBoxRight}>
        <EchartsEL
          colorArr={colorArr}
          seriesData={seriesData}
          legendArr={legendArr}
          textColor={theme ? "rgba(37, 76, 112, 1)" : "#fff"}
        ></EchartsEL>
      </div>
    </div>
  );
}
